<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<html>
<head>
	<meta charset="utf-8">
	<title>首页--layui后台管理模板 2.0</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="../layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="../css/public.css" media="all" />
</head>
<body class="childrenBody">
	<blockquote class="layui-elem-quote layui-bg-green">
		<div id="nowTime"></div>
	</blockquote>
	<div class="layui-fluid">
		<div class="layui-row layui-col-space15">
			<div class="layui-col-sm6 layui-col-md3">
				<div class="layui-card">
					<div class="layui-card-header">
						今日上架车位数
						<span class="layui-badge layui-bg-blue layuiadmin-badge">辆</span>
					</div>
					<div class="layui-card-body layuiadmin-card-list">
						<p class="layuiadmin-big-font" id="cars"></p>
<!--						<p>-->
<!--							总计访问量-->
<!--							<span class="layuiadmin-span-color">88万 <i class="layui-inline layui-icon layui-icon-flag"></i></span>-->
<!--						</p>-->
					</div>
				</div>
			</div>
			<div class="layui-col-sm6 layui-col-md3">
				<div class="layui-card">
					<div class="layui-card-header">
						今日已租车位数
						<span class="layui-badge layui-bg-cyan layuiadmin-badge">辆</span>
					</div>
					<div class="layui-card-body layuiadmin-card-list">
						<p class="layuiadmin-big-font" id="carson"></p>
<!--						<p>-->
<!--							新下载-->
<!--							<span class="layuiadmin-span-color">10% <i class="layui-inline layui-icon layui-icon-face-smile-b"></i></span>-->
<!--						</p>-->
					</div>
				</div>
			</div>
			<div class="layui-col-sm6 layui-col-md3">
				<div class="layui-card">
					<div class="layui-card-header">
						提成收入
						<span class="layui-badge layui-bg-green layuiadmin-badge">元</span>
					</div>
					<div class="layui-card-body layuiadmin-card-list">

						<p class="layuiadmin-big-font" id="money"></p>
<!--						<p>-->
<!--							提成-->
<!--							<span class="layuiadmin-span-color">*** <i class="layui-inline layui-icon layui-icon-dollar"></i></span>-->
<!--						</p>-->
					</div>
				</div>
			</div>
			<div class="layui-col-sm6 layui-col-md3">
				<div class="layui-card">
					<div class="layui-card-header">
						订单平均收入
						<span class="layui-badge layui-bg-green layuiadmin-badge">元</span>
					</div>
					<div class="layui-card-body layuiadmin-card-list">

						<p class="layuiadmin-big-font" id="moneyo"></p>
<!--						<p>-->
<!--							总收入-->
<!--							<span class="layuiadmin-span-color">*** <i class="layui-inline layui-icon layui-icon-dollar"></i></span>-->
<!--						</p>-->
					</div>
				</div>
			</div>
		</div>
		<div class="layui-col-md12">
			<div class="layui-card">
				<div class="layui-card-body">
					<!--矩形统计表-->
					<div id="main1" style="width: 600px;height: 400px; margin: 2%"></div>
				</div>
			</div>
		</div>
	</div>
	<hr>



	<script type="text/javascript" src="../layui/layui.js"></script>
	<script type="text/javascript" src="../js/main.js"></script>
</body>
<script src="../../js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script>
	layui.use(['form','element','layer','jquery'],function(){
		var form = layui.form,
				layer = parent.layer === undefined ? layui.layer : top.layer,
				element = layui.element;
		$ = layui.jquery;
		//外部图标
		$.get(iconUrl,function(data){
			$(".outIcons span").text(data.split(".icon-").length-1);
		})

		$.ajax({
			url:"/carNums",
			type:"get",
			success:function (res) {

				$("#cars").html(res)
			}
		})
		$.ajax({
			url:"/carNumson",
			type:"get",
			success:function (res) {

				$("#carson").html(res)
			}
		})

		$.ajax({
			url:"/odersmoney",
			type:"get",
			success:function (res) {

				$("#money").html(res)
			}
		})
		$.ajax({
			url:"/odersmoney1",
			type:"get",
			success:function (res) {

				$("#moneyo").html(res)
			}
		})
	})

	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById('main1'));
	//数据加载完之前先显示一段简单的loading动画
	myChart.showLoading();
	//图表
	var names = [];    //横坐标数组（实际用来盛放X轴坐标值）
	var values = [];    //纵坐标数组（实际用来盛放Y坐标值）
	$.ajax({
		url: "/indexlist.do",
		type: "GET",
		dataType: "json",
		success: function (data) {

			if(data.code==200){
				for (var i = 0; i < data.data.length; i++) {
					names.push(data.data[i].msg);
					values.push(data.data[i].code);
				}
				myChart.hideLoading();    //隐藏加载动画
				myChart.setOption({

					title: {
						text: "详情一览",
						textStyle:{
							color:'#c36ff6',
							fontSize: 20,
							fontWeight: 'normal',
							align: 'left',
							fontFamily:"微软雅黑"
						}
					},
					tooltip: {},
					xAxis: {
						type: "category",
						data: names

					},
					yAxis: {
						type: 'value',
						data: [5,10,15],
						nameTextStyle:{
							color:'#fff'
						},
						axisLabel : {
							formatter: '{value}',
							textStyle: {
								color: '#fff',
//                  fontSize:16
							}
						},
						yAxis: {},
						axisLine: {
							show: true,
							lineStyle: {
								color:'#7192ca',
								width:2
							}
						},

					},
					series: [{
						// 根据名字对应到相应的系列
						type: 'bar',
						data: values,
						itemStyle: {
							emphasis: {
								barBorderRadius: [10, 10, 10, 10]
							},//圆角
							normal: {
								color: function (params) {
									// build a color map as your need.
									var colorList = ['#ec635a', '#ed719e', '#c36ff6', '#736af6', '#7993f7', '#86d4fb', '#91fce7'];
									return colorList[params.dataIndex]  //柱状图的颜色
								}
							},
							markPoint: {
								symbol: 'pin',//标记类型
								symbolSize: 40,//图形大小
								itemStyle: {
									normal: {
										borderColor: '#fff',
										borderWidth: 1,            // 标注边线线宽，单位px，默认为1
										label: {
											show: true
										}
									}
								},
								data: [//配置项
									{value: '5', xAxis: 0, yAxis: 5},
									{value: '10', xAxis: 1, yAxis: 10},
									{value: '15', xAxis: 2, yAxis: 15},
									{value: '20', xAxis: 3, yAxis: 20},
									{value: '25', xAxis: 4, yAxis: 25},
									{value: '30', xAxis: 5, yAxis: 30},
									{value: '50', xAxis: 6, yAxis: 50},
								]
							},
						}
					}],

				});
			}
		}
	});

</script>
</html>